import * as React from 'react';
import {Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import SubscriptionScreen from './src/screens/Subscription/SubscriptionScreen';
import FindScreen from './src/screens/Find/FindScreen';
import VideoScreen from './src/screens/Video/VideoScreen';
import HomeScreen from './src/screens/Home/HomeScreen';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import VideoDetailScreen from './src/screens/Home/VideoDetailScreen';

const HomeStack = createNativeStackNavigator();
const SubscriptionStack = createNativeStackNavigator();
const FindStack = createNativeStackNavigator();
const VideoStack = createNativeStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Group screenOptions={{headerShown: false}}>
        <HomeStack.Screen name="Home" component={HomeScreen} />
      </HomeStack.Group>
      <HomeStack.Group
        screenOptions={{headerShown: false, presentation: 'modal'}}>
        <HomeStack.Screen name="Detail" component={VideoDetailScreen} />
      </HomeStack.Group>
    </HomeStack.Navigator>
  );
}
function FindStackScreen() {
  return (
    <FindStack.Navigator screenOptions={{headerShown: false}}>
      <FindStack.Screen name="Find" component={FindScreen} />
    </FindStack.Navigator>
  );
}
function SubscriptionStackScreen() {
  return (
    <SubscriptionStack.Navigator screenOptions={{headerShown: false}}>
      <SubscriptionStack.Screen
        name="Subscription"
        component={SubscriptionScreen}
      />
    </SubscriptionStack.Navigator>
  );
}
function VideoStackScreen() {
  return (
    <VideoStack.Navigator screenOptions={{headerShown: false}}>
      <VideoStack.Screen name="Video" component={VideoScreen} />
    </VideoStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({route}) => ({
          tabBarLabel: ({color}) => {
            let label;
            console.log('route', route);

            switch (route.name) {
              case 'HomeStack':
                label = 'Home';
                break;
              case 'FindStack':
                label = 'Find';
                break;
              case 'SubscriptionStack':
                label = 'Subscription';
                break;
              case 'VideoStack':
                label = 'Video';
                break;
            }
            return (
              <Text style={{color, fontSize: 12, fontWeight: 'bold'}}>
                {label}
              </Text>
            );
          },
          tabBarIcon: ({focused, color, size}) => {
            let iconName;
            switch (route.name) {
              case 'HomeStack':
                iconName = 'home';
                break;
              case 'FindStack':
                iconName = 'earth';
                break;
              case 'SubscriptionStack':
                iconName = 'bell-ring';
                break;
              case 'VideoStack':
                iconName = 'video';
                break;
            }
            return (
              <MaterialCommunityIcons
                name={iconName || 'home'}
                color={color}
                size={size}
              />
            );
          },
          tabBarActiveTintColor: 'white',
          tabBarInactiveTintColor: 'gray',
          headerShown: false,
          tabBarStyle: {backgroundColor: 'black'},
        })}>
        <Tab.Screen name="HomeStack" component={HomeStackScreen} />
        <Tab.Screen name="FindStack" component={FindStackScreen} options={{ tabBarBadge: 3 }}/>
        <Tab.Screen
          name="SubscriptionStack"
          component={SubscriptionStackScreen}
        />
        <Tab.Screen name="VideoStack" component={VideoStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
